<template>
    <div>
        <h1>{{ message }}</h1>
        <button @click="incrementCounter">Click me!</button>
        <transition name="animate__animated animate__bounce" enter-active-class="animate__backInUp" leave-active-class="animate__backOutDown">
            <p class="come" v-show="isShow" >Counter: {{ counter }}</p>
        </transition>
        <!-- <p class="come" v-show="isShow" >Counter: {{ counter }}</p> -->
    </div>
</template>

<script>
    import 'animate.css'
    export default {
        data() {
            return {
                message: 'Hello, world!',
                isShow: true,
                counter: 0
            }
        },
        methods: {
            incrementCounter() {
                this.isShow=!this.isShow
                this.counter++
            }
        }
    } 
</script>

<style scoped>
    p {
        border: 1px solid red;
        padding: 10px;
        margin: 10px;
        background-color: aqua;
    }
</style>

